<template>
	<view class="page" :style="loading ? 'opacity: 0;' : 'opacity: 1;'">
		<pageTxt>
			<!--  v-model="dataList" @query="queryList" -->
			<image src="/static/images/user-bg.png" mode="widthFix" class="bg-icon"></image>
			<z-paging ref="paging">
				<!-- 头部 -->
				<template slot="top">
					<u-navbar title=" " leftIcon=" " bgColor="rgba(0,0,0,0)" :fixed="false"></u-navbar>
				</template>
				<view class="content">
					<view class="user-data-box flex ac">
						<image :src="userInfo.image" mode="aspectFill" class="avater-box"></image>
						<view class="user-data">
							<view class="user-name">{{ userInfo.name }}</view>
							<view class="phone-admin flex ac">
								<view class="phone">{{ userInfo.phone }}</view>
								<view class="border"></view>
								<view class="admin">{{ userInfo.position }}</view>
							</view>
						</view>
					</view>
					<view class="item-box">
						<view class="item-box-item flex ac jb" hover-class="hover-class" @click="jump('upTel')">
							<view class="title-box flex ac">
								<text class="iconfont icon-shouji"></text>
								手机号修改
							</view>
							<u-icon name="arrow-right" color="#898989" size="14"></u-icon>
						</view>
						<view class="item-box-item flex ac jb" hover-class="hover-class" @click="jump('upPwd')">
							<view class="title-box flex ac">
								<text class="iconfont icon-jiesuo"></text>
								密码修改
							</view>
							<u-icon name="arrow-right" color="#898989" size="14"></u-icon>
						</view>
					</view>
					<view class="item-box login-out" hover-class="hover-class" @click="goOut">退出登录</view>
				</view>
				<!-- 尾部 -->
				<tabbar slot="bottom"></tabbar>
			</z-paging>
		</pageTxt>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: true,
			dataList: [],
			userInfo: {}
		};
	},
	onShow() {
		uni.hideTabBar();
		setTimeout(() => {
			this.loading = false;
		}, 200);
		let userInfo = uni.getStorageSync('userInfo');
		userInfo.phone = userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
		this.userInfo = userInfo;
	},
	methods: {
		jump(type) {
			uni.navigateTo({
				url: `/pages/user/${type}/${type}`
			});
		},
		goOut() {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '您确定要退出登录么？',
				showCancel: true,
				success(res) {
					if (res.confirm) {
						that.logOut();
					}
				}
			});
		},
		logOut() {
			uni.showLoading({
				mask: true
			});

			this.$hApi.wxUnbind({}).then((res) => {
				console.log(res, '退出登录');
				if (res.code == 200) {
					uni.hideLoading();
					uni.clearStorage();
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/block/block'
						});
					}, 300);
				} else {
					uni.showToast({
						title: res.message,
						icon: 'error'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import 'user.scss';
</style>
